Add client side navigation #530
Conversation
Deploying redwood-sdk-docs with
|
| Latest commit: |
1cd0e9e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://72ba7478.redwood-sdk-docs.pages.dev |
| Branch Preview URL: | https://pp-client-navigation.redwood-sdk-docs.pages.dev |
| 1. Intercept the link click, | ||
| 2. Push the new URL to the browser's history, | ||
| 3. Fetch the new page's RSC payload from the server, | ||
| 4. And hydrate it on the client. |
| } | ||
|
|
||
| // Skip if download attribute | ||
| if (link.hasAttribute("download")) { |
There was a problem hiding this comment.
Should we document this?
There was a problem hiding this comment.
My intuition says that it's such a little footnote that it doesn't really matter. It's the expected behavior.
There was a problem hiding this comment.
Ah, woops, I didn't know its an actual standard attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#download :D
But I also don't know how I was thinking it could be non-standard 🤦
| } = { | ||
| onNavigate: async function onNavigate() { | ||
| // @ts-expect-error | ||
| await globalThis.__rsc_callServer(); |
There was a problem hiding this comment.
Incredible how simple this is!
There was a problem hiding this comment.
Yeah, it's pretty incredible.
🚀
|
At some point, I would like to get a hook on the fetch that has been called by call server because then I can actually implement some kind of preload functionality. |
|
I just realized that if we push down a redirect response or an error response, we should probably not try and deal with that. We should just reload the browser at this point. |
This adds the ability for us to initialize client-side navigation, also known as single-page apps.
Docs: https://pp-client-navigation.redwood-sdk-docs.pages.dev/guides/frontend/client-side-nav/